<!--
 * @Description: 
 * @Author: 若城
 * @Date: 2023-03-27 20:44:29
 * @LastEditTime: 2023-03-30 00:32:03
-->
<template>
  <view style="background: #f5f5f5">
    <view class="viewBox">
      <u-image
        width="750rpx"
        height="377rpx"
        src="/static/social/s1.png"
        mode="widthFix"
      ></u-image>
      <text class="adres">{{ topData.address }}</text>
      <view class="userMsg">
        <view class="userName">
          <text>姓名:</text>
          <text class="name">{{ topData.name }}</text>
          <u-icon color="#baddf3" class="iconName" name="eye"></u-icon>
        </view>
        <view class="userNum">
          <text>社会保障号码:</text>
          <text class="userNumber">{{ topData.number }}</text>
        </view>
      </view>
    </view>
    <view class="listCard">
      <u-image
        v-for="item in cardList"
        :key="item.id"
        :width="item.width + 'rpx'"
        :height="item.height + 'rpx'"
        :src="item.img"
        @click="handleImg(item.id)"
        mode="widthFix"
      ></u-image>
    </view>
    <view class="s2">
      <u-image
        width="686rpx"
        height="158rpx"
        src="/static/social/s2.png"
        mode="widthFix"
      ></u-image>
    </view>
    <view class="s3">
      <u-image
        width="686rpx"
        height="1259rpx"
        src="/static/social/s3.png"
        mode="widthFix"
      ></u-image>
      <view class="s3Pos">
        <text @click="handleImg(3)"></text>
        <text @click="handleImg(4)"></text>
      </view>
    </view>
    <view class="s4">
      <u-image
        width="687rpx"
        height="467rpx"
        src="/static/social/s4.png"
        mode="widthFix"
      ></u-image>
    </view>
  </view>
</template>
<script>
import { getSList } from "../../api/rc";
import m1 from "../../static/social/m1.png";
import m2 from "../../static/social/m2.png";
import m3 from "../../static/social/m3.png";
import m4 from "../../static/social/m4.png";
import m5 from "../../static/social/m5.png";
import m6 from "../../static/social/m6.png";
import m7 from "../../static/social/m7.png";
import m8 from "../../static/social/m8.png";

export default {
  data() {
    return {
      topData: {},
      cardList: [
        {
          id: 1,
          img: m1,
          width: "171",
          height: "203",
        },
        {
          id: 2,
          img: m2,
          width: "172",
          height: "203",
        },
        {
          id: 3,
          img: m3,
          width: "179",
          height: "203",
        },
        {
          id: 4,
          img: m4,
          width: "164",
          height: "203",
        },
        {
          id: 5,
          img: m5,
          width: "171",
          height: "215",
        },
        {
          id: 6,
          img: m6,
          width: "172",
          height: "215",
        },
        {
          id: 7,
          img: m7,
          width: "179",
          height: "215",
        },
        {
          id: 8,
          img: m8,
          width: "164",
          height: "215",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      await getSList().then((res) => {
        this.topData = res.data;
      });
    },
    handleImg(id) {
    //   console.log("🚀 ~ file: socialDetail.vue:124 ~ handleImg ~ id:", id);
      switch (id) {
        case 3:
          uni.navigateTo({
            url: "/pages/socialSecurity/Insurance",
          });
          break;
        case 4:
        uni.navigateTo({
            url: `/pages/socialSecurity/paymentInquiry?name=${this.topData.name}&num=${this.topData.number}`,
          });
          break;

        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.viewBox {
  position: relative;
}
.adres {
  color: #fff;
  font-size: 29rpx;
  position: absolute;
  top: 80rpx;
  right: 130rpx;
  width: 207rpx;
  display: block;
}
.userMsg {
  position: absolute;
  left: 80rpx;
  bottom: 137rpx;
}
.userName {
  // display: block;
  color: #fff;
  font-size: 25rpx;
  // float: left;
  display: flex;
  .name {
    margin-left: 19rpx;
    margin-right: 28rpx;
  }
}
.userNum {
  color: #fff;
  font-size: 25rpx;
  // float: left;
  display: flex;
  margin-top: 35rpx;
  .userNumber {
    margin-left: 19rpx;
  }
}
.listCard {
  width: 686rpx;
  height: 417rpx;
  padding: 42rpx 0 17rpx 0;
  margin: 0 auto;
  background: #fff;
  border-radius: 30rpx;
  display: flex;
  flex-wrap: wrap;
}
.s2 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 750rpx;
  height: 183rpx;
}
.s3 {
  display: flex;
  justify-content: center;
  width: 750rpx;
  position: relative;
  .s3Pos {
    width: 686rpx;
    height: 150rpx;
    position: absolute;
    bottom: 307rpx;
    display: flex;
    justify-content: space-around;
    text {
      background: #000;
      opacity: 0;
      width: 270rpx;
      height: 100rpx;
      display: block;
    }
  }
}
.s4 {
  display: flex;
  justify-content: center;
  width: 750rpx;
}
</style>